<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
    <script>
        $(function(){
//内部插入 =>子节点
$(".append").click(function(){
    //子元素后面
    $("ul").append("<li>列表append</li>");
    //$("<li>列表append</li>").appendTo($("ul"));
})
$(".prepend").click(function(){
    //子元素前面
    $("ul").prepend("<li>列表prepend</li>");
})
//外部插入 =>兄弟节点
$(".before").click(function(){
    //上面
    $("ul").before("<li>列表before</li>");
})
$(".after").click(function(){
    //下面
    $("ul").after("<li>列表after</li>");
})
//包裹 =>父节点
$(".wrap").click(function(){
    
    $("ul").wrap("<div style='color:red'></div>");
        })
        //修改
        $(".replaceWith").click(function(){
    
    $("li:first").replaceWith("<li>列表new</li>");
        })
        //删除

        $(".empty").click(function(){
    
    $("li:first").empty();
})//清空内容
$(".remove").click(function(){
    //删除元素
    $("li:first").remove();
})
//克隆
$(".clone").click(function(){
    
    $("li:first").clone().appendTo($("ul"));
})


// $("li").click(function(){
//     console.log($(this).text())
// })
// $("ul").on("click","li",function(){
//     console.log($(this).text())
// })
$("ul").on("click dblclick","li",function(){
    console.log($(this).text())
})
//live

// $("li:first")
// $("li").first()
  //$("li:eq(2)")
 //$("li").eq(2)

    })
    </script>
</head>
<body>
    <button class="append">append</button>
    <button class="prepend">prepend</button>
    <br>
    <button class="before">before</button>
    <button class="after">after</button>
    <br>
    <button class="wrap">wrap</button>
    <br>
    <button class="replaceWith">replaceWith</button>
    <br>
    <button class="empty">empty</button>
    <button class="remove">remove</button>
    <br>
    <button class="clone">clone</button>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
</body>
</html>